<template>
    <a-card :bordered="false">
    <!-- 左侧面板 -->
    <div class="table-page-search-wrapper">
        <!-- form表单 -->
      <a-form layout="inline">
        <a-row :gutter="12">
          <a-col :md="7" :sm="8">
            <a-form-item label="硬件编号" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
              <a-input placeholder="请输入硬件编号" v-model="queryParam.ids"></a-input>
            </a-form-item>
          </a-col>
            <a-col :md="7" :sm="8">
            <a-form-item label="启用状态" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
               <j-dict-select-tag  v-model="queryParam.enabled" placeholder="请选择启用状态"
                  dictCode="enabled"/>
            </a-form-item>
          </a-col>
            <a-col :md="7" :sm="8">
            <a-form-item label="租赁状态" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
                <j-dict-select-tag  v-model="queryParam.leasestate" placeholder="请选择租赁状态"
                  dictCode="leasestate"/>
            </a-form-item>
          </a-col>
            <a-col :md="7" :sm="8">
            <a-form-item label="商品名称" :labelCol="{span: 6}" :wrapperCol="{span: 14, offset: 1}">
            <a-select  placeholder="请选择商品类型"  v-model="queryParam.commodityId">
                <a-select-option v-for="(selpurpose) in SysCommodity" :value="selpurpose.commodityId">
                {{selpurpose.commodityName}}
                </a-select-option>
            </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="7" :sm="8">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>

      <div class="table-operator" style="border-top: 5px">
        <a-button @click="handleAdd" type="primary" icon="plus">添加</a-button>

      </div>

      <a-table
        ref="table"
        rowKey="id"
        size="middle"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">
            <a-icon type="edit"/>
            编辑
          </a>
          <a-divider type="vertical"/>
          <a @click="toFilterelementReplaceList(record)">
            <a-icon type="edit"/>
            详情
          </a>
          <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item v-if="record.enabled==0">
                <a-popconfirm title="确定删除吗?" @confirm="() =>handleDelete(record.equipmentId)">
                  <a>删除</a>
                </a-popconfirm>
              </a-menu-item>

              <a-menu-item v-if="record.enabled==0">
                <a-popconfirm title="确定安装吗?" @confirm="() => toInstallationEquipment(record)">
                  <a>安装</a>
                </a-popconfirm>
              </a-menu-item>
              <a-menu-item v-if="record.enabled==1">
                <a-popconfirm title="确定回收吗?" @confirm="() => recoveryEquipment(record.equipmentId)">
                  <a>回收</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown>

        </span>
      </a-table>

    </div>
  <!-- 把新增修改页面变为查询页面的内部的div，默认是隐藏状态，点击新增或者修改时变为显示状态 -->
  <!--@ok如果父页面监听到子页面返回Ok,调用modalFormOk方法-->
  <equipment-model ref="modalForm" @ok="modalFormOk"></equipment-model>
  <installation-equipment ref="installation" @ok="modalFormOk"></installation-equipment>
  <filterelement-replace-list ref="replace" @ok="modalFormOk"></filterelement-replace-list>

  </a-card>
</template>
<script>
//导包

  import { filterObj } from '@/utils/util';
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import {getAction} from '@/api/manage'
  import EquipmentModel from './model/EquipmentModel'
  import InstallationEquipment from './model/InstallationEquipment'
  import FilterelementReplaceList from './FilterelementReplaceList'
    //对象内容
  export default {
    //对象名称
    name: "EquipmentList",
    //申明导入的对象
    mixins:[JeecgListMixin],
    //声明引用的页面
    components:{EquipmentModel,InstallationEquipment,FilterelementReplaceList},
    //对象中的变量
    data() {
      return {
        description: '这是设备管理页面',
        visible: false,
        SysCommodity:"",
        // 查询条件
        queryParam: {
          commodityId: "",
          ids:"",
          enabled:"",
          leasestate:""
        },
        // 表头
        columns: [
          {
            title: '#',
            dataIndex: '',
            key: 'rowIndex',
            width: 120,
            align: "center",
            customRender: function (t, r, index) {
              return parseInt(index) + 1;
            }
          },
          {
            title: '设备编号',
            align: "left",
            dataIndex: 'equipmentId',
          },
          {
            title: '商品名称',
            align: "left",
            dataIndex: 'commodityName',
          },
          {
            title: '所属代理',
            align: "left",
            dataIndex: 'departName',
          },
           {
            title: '客户名',
            align: "left",
            dataIndex: 'clientName',
          },
           {
            title: '硬件编号',
            align: "left",
            dataIndex: 'ids',
          },
           {
            title: '启用状态',
            align: "left",
            dataIndex: 'enabled_dictText',
          },
           {
            title: '租赁状态',
            align: "left",
            dataIndex: 'leasestate_dictText',
          },
           {
            title: '商品租价',
            align: "left",
            dataIndex: 'commodityRent',
          },
           {
            title: '主板状态',
            align: "left",
            dataIndex: 'mainboard_dictText',
          },
           {
            title: '滤芯状态',
            align: "left",
            dataIndex: 'filterelementType_dictText',
          },
           {
            title: '创建人',
            align: "left",
            dataIndex: 'createBy',
          },
           {
            title: '创建时间',
            align: "left",
            dataIndex: 'createTime',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: "center",
            scopedSlots: {customRender: 'action'},
          }
        ],
        labelCol: {
          xs: {span: 8},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 16},
          sm: {span: 19},
        },
        url: {
          list:"/equipment/equipment/list",
          delete:"/equipment/equipment/del",
        },
      }
    },
    created () {
        this.selUser();
    },
    methods: {
      //打开设备详情页
      toFilterelementReplaceList(record){
        this.$refs.replace.add(record);
      },
      selUser(){

        getAction("/commodity/commodity/list",null).then((res) => {
          this.SysCommodity = res.result.records;
        })
      },
      toInstallationEquipment(record){
        this.$refs.installation.edit(record);
      },
      recoveryEquipment(equipmentId){
        getAction("/equipment/equipment/recoveryEquipment",{"equipmentId":equipmentId}).then((res) => {
          if(res.success){
            this.$message.success(res.message);
            this.loadData();
          }else{
             this.$message.warning(res.message);
          }
        })
      }
    },
  }
</script>
<style scoped>
  @import '~@assets/less/common.less'
</style>